Using the ::first-letter Pseudo-Element in CSS
The ::first-letter pseudo-element in CSS allows you to target and style the first letter of a block-level element. It is commonly used to create decorative effects, like drop caps or emphasized initial letters in paragraphs.
::first-lettertargets only the very first letter of the text content of an element.It can be combined with CSS properties like
font-size,font-weight,color,float, andtext-transform.This pseudo-element applies only to block-level elements such as
<p>,<div>,<section>, etc.It does not require any additional HTML markup for styling the first letter.
In this example, the first letter of the paragraph is enlarged, bolded, colored blue, and floated to the left, creating a classic drop cap effect.
Use
::first-letterto enhance readability or add decorative styling to text.Combine with spacing and color properties for visual impact.
Avoid using for interactive elements; it is strictly for styling content.
Test across browsers to ensure consistent appearance.